<!DOCTYPE html>
<html>
  <head>
    <title>Raspberry Pi Finder</title>
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <img src="adafruit.svg">

    <div id="status"></div>

    <div id="ssh" class="hide">
      <div class="group"><label class="host">IP Address:</label> <label class="port">Port:</label></div>
      <div class="group"><select class="host" name="host"></select> <input class="port" name="port" value="22"></div>
      <div class="clear"></div>
      <label>SSH User:</label>
      <input name="username" value="pi">
      <label>SSH Password</label>
      <input name="password" value="raspberry">
      <div class="group"><a class="button" id="connect">Terminal</a> <a class="button" id="upload">Upload</a></div>
      <div class="clear"></div>
      <a class="button" id="shutdown">Shutdown</a>
    </div>

    <div id="options" class="hide">
      <label>Hostname:</label>
      <input name="hostname" placeholder="raspberrypi">
      <label>WiFi SSID:</label>
      <input name="wifi_ssid" placeholder="ssid">
      <label>WiFi Password</label>
      <input name="wifi_password" pattern=".{8,63}" placeholder="******">
      <label class="check"><input type="checkbox" name="webide" value="yes"> Install the WebIDE?</label>
      <a class="button" id="bootstrap">Bootstrap!</a>
    </div>

    <div class="clear"></div>

    <a class="button" id="find">Find My Pi!</a>

    <script>

      const {ipcRenderer} = require('electron');
      var timer;

      window.$ = window.jQuery = require('./jquery.js');

      $(document).on('ready', function() {

        $('#find').click(function() {
          $(this).addClass('hide');
          ipcRenderer.send('find');
        });

        $('#bootstrap').click(function() {

          if(! $('input[name=wifi_password]')[0].checkValidity()) {
            alert('WiFi Passphrase must be 8..63 characters');
            return;
          }

          $('#ssh, #options').addClass('hide');

          var options = get_ssh();

          options.pi_config = get_options();
          options.type = 'bootstrap';

          ipcRenderer.send('connect', options);

        });

        $('#connect').click(function(e) {

          $('#ssh, #options').addClass('hide');

          var options = get_ssh();

          if (e.shiftKey)
            options.grayscale = true;

          ipcRenderer.send('connect', options);

        });

        $('#upload').click(function() {

          $('#ssh, #options').addClass('hide');

          var options = get_ssh();
          options.type = 'upload';

          ipcRenderer.send('connect', options);

        });

        $('#shutdown').click(function() {

          var options = get_ssh();

          options.type = 'shutdown';

          ipcRenderer.send('connect', options);

        });

      });

      ipcRenderer.on('reset', function(not_found) {

        if(not_found) {

          if(timer) {
            clearInterval(timer);
            timer = null;
          }

          $('#find').removeClass('hide');
          return $('#status').html('Your Pi could not be found. Are you sure it is attached to the network?');

        }

        $('#status').html('');
        $('#options, #ssh').removeClass('hide');

      });

      ipcRenderer.on('found', function(e, arg) {

        if(timer) {
          clearInterval(timer);
          timer = null;
        }

        $('#options, #ssh').removeClass('hide');
        $('select[name=host]').html('');

        arg.forEach(function(ip) {
          $('select[name=host]').append('<option>' + ip + '</option>');
        });

        $('#status').html('Found!');

      });

      ipcRenderer.on('working', function(e,data) {

        if(timer) {
          clearInterval(timer);
          timer = null;
        }

        timer = working(data);

      });

      ipcRenderer.on('status', function(e,arg) {

        if(timer) {
          clearInterval(timer);
          timer = null;
        }

        $('#status').html(arg);

      });

      function get_options() {

        var options = {};

        $('#options input').each(function() {

          if($(this).attr('type') == 'checkbox' && !$(this).is(':checked')) {
            return;
          }

          if($(this).val() === '') {
            return;
          }

          options[$(this).attr('name')] = $(this).val();

        });

        return options;

      }

      function get_ssh() {

        var options = {};

        $('#ssh input, #ssh select').each(function() {
          options[$(this).attr('name')] = $(this).val();
        });

        return options;

      }

      function working(message) {

        var count = 1;

        var t = setInterval(function() {

          if(count > 3) {
            count = 1;
          }

          $('#status').html(message + Array(count + 1).join('.'));

          count++;

        }, 500);

        return t;

      }

    </script>
  </body>
</html>
